<template>
  <!-- 轮播图-->
  <div class="carousel">
    <van-swipe class="my-swipe CarouSel" autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(i,index) in getCarousel" :key="index" >
        <img :src="i.bannerImgUrl">
      </van-swipe-item>
    </van-swipe>
    <p v-for="(i,index) in getCarousel" :key="index"><a href="#">{{ i.title }}</a></p>
  </div>
</template>

<script>


import {getCarousel} from "@/api/api-index";

export default {
  name: "carousel",
  data() {
    return {
      getCarousel: [],
    }
  },
  created() {
    getCarousel().then(res => {
      // console.log(res)
      if (res.code === 0) {
        this.getCarousel = res.rows
      }

    })

  }
}
</script>

<style scoped lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  height: 10em;

  img {
    height: 100%;
    width: 100%;
  }
}

p {
  padding-bottom: 4px;
  border-bottom: 1px solid #f1f1f1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  a {
    margin-left: 15px;
    color: darkkhaki;
    font-size: 14px
  }
}
</style>